/* 环形容器样式 */
.container {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  border-radius: 100%;  /* 圆形边框 */
  margin: auto;
  margin-top: 9%;
  position: relative;
  /* 容器旋转动画，实现整体旋转效果，reverse表示反向旋转 */
  animation: rotate 20s linear infinite reverse;
}

/* 图片项样式 */
.item {
  width: 120px;
  height: 120px;
  border-radius: 100%;
  position: absolute;
  /* 将图片定位在容器顶部中央 */
  left: 190px;
  top: -60px;
  /* 设置变换原点为容器中心，使图片围绕圆心旋转 */
  transform-origin: center 310px;
}

/* 图片样式 */
.item img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

/* 为每个图片项设置不同的旋转角度，形成环形布局 */

.item:nth-child(1) {
  transform: rotate(0deg);
}

.item:nth-child(1) img {
  --inint: 0deg;
  transform: rotate(0deg);
  animation: rotate 20s linear infinite;
}

.item:nth-child(2) {
  transform: rotate(72deg);  /* 360/5=72度 */
}

.item:nth-child(2) img {
  --inint: -72deg;
  transform: rotate(-72deg);
  animation: rotate 20s linear infinite;
}

.item:nth-child(3) {
  transform: rotate(144deg);  /* 72*2=144度 */
}

.item:nth-child(3) img {
  --inint: -144deg;
  transform: rotate(-144deg);
  animation: rotate 20s linear infinite;
}

.item:nth-child(4) {
  transform: rotate(216deg);  /* 72*3=216度 */
}

.item:nth-child(4) img {
  --inint: -216deg;
  transform: rotate(-216deg);
  animation: rotate 20s linear infinite;
}

.item:nth-child(5) {
  transform: rotate(288deg);  /* 72*4=288度 */
}

.item:nth-child(5) img {
  --inint: -288deg;
  transform: rotate(-288deg);
  animation: rotate 20s linear infinite;
}

/* 旋转动画关键帧 */
@keyframes rotate {
  from {
    /* 使用CSS变量计算初始旋转角度，360deg+初始角度 */
    transform:rotate(calc(360deg + var(--inint,0deg)));
  }
}